import React, { Component } from 'react';

class Login extends Component {
  // es7 
  state = {
    loginState: 1,
    account: 'wqw',
    password: '123',
    user: {
      name: 'abc',
      age: 11,
    },
    list: ["abc", "hello"],
    count: 0
  }

  // submitHandler() {
  //   console.log("login is ok.", this.state.account, this.state.password)
  // }
  constructor() {
    super()
    // this.state={loginState: 1}
    // this.submitHandler = this.submitHandler.bind(this)
  }

  // 更新输入框账号
  changeAccount = (e) => {
    console.log(e.target.value)
    let newValue = e.target.value
    this.setState({
      account: newValue
    })
  }

  // 更新输入框密码
  changePassword = (e) => {
    let newValue = e.target.value
    this.setState({
      password: newValue
    })
  }

  submitHandler = (value, ev) => { // 普通参数，写前面，事件对象，写在最后。
    // ev: 事件对象，
    // value: 参数值2
    // console.log("login is ok.", this.state.account, this.state.password)
    console.log(ev)
    console.log(value)
  }

  increment() {
    // console.log(this.state.count)  // 0
    // 1. 传一个对象，setState()会合并里面的属性，一起去修改state.
    // this.setState({
    //   count: this.state.count + 1,
    // })

    // 语法2，传一个回调函数，函数没有办法合并到一个setState()里面去的。只能一个一个去修改
    this.setState((prestate, props) => {
      console.log(this.state.count) // 0 0 0 0 0 
      return { count: prestate.count + 1 }
    })
  }
  render() {
    return (
      <div>
        <form>
          Account: <input type="text" value={this.state.account} onChange={this.changeAccount} />
          <br />
          PassWord: <input type="password" value={this.state.password} onChange={this.changePassword} />
          <br />
          {/* <button type='button' onClick={this.submitHandler.bind(this)}>登录</button> */}
          {/* <button type='button' onClick={() => this.submitHandler()}>登录</button> */}

          {/* <button type='button' onClick={this.submitHandler}>登录</button> */}

          {/* 下面的语法，可以在绑定事件时，传格外的参数，同时还可以获取到事件对象 */}
          {/* <button type='button' onClick={(event) => {
            console.log(event)
            // 传实参时，要对比形参来写
            this.submitHandler("abc",event)
          }}>登录</button> */}

          {/* 使用bind()，传参数的语法 */}
          <button type='button' onClick={this.submitHandler.bind(this, " ABC ")}>登录</button>

          {/* ------------state 的更新---------- */}
          <div>
            username: {this.state.user.name}
            / age: {this.state.user.age}
          </div>
          <button type='button' onClick={() => {
            // 局部更新state中引用类型的属性：
            // let user = Object.assign({}, this.state.user, { name: 'wqw' })
            this.setState({
              // 'user': user
              user: { ...this.state.user, name: 'wqw' }
            })
          }}>修改user选项</button>

          {/* **********************如果要依赖当前 state 来更新下一个 state，可以让 setState() 接收一个函数而不是一个对象.如setState((prestate, props)=>{})语法2：必须返回一个对象。 */}
          <button type='button' onClick={() => {
            this.setState(
              (prestate, props) => {
                // preState：更新前的 state
                // props：当前的 props
                console.log(prestate, props)
                //  prestate, 不可以使用 ... prestate,解构对象
                return { user: Object.assign({}, this.state.user, { name: 'wqw' }) }

              }
            )
          }}>修改user选项2</button>

          {/* ******************数组 */}
          <div>
            {this.state.list.toString()}
          </div>
          <button type='button' onClick={() => {
            // 获取数组，赋值给临时变量
            // let t = this.state.list;
            // 修改临时数组
            // t.push('xyz')
            // 修改状态

            // 修改指定下标元素的值
            // t[0] = "123"

            this.setState({
              // list: t
              // list: this.state.list.concat(['xyz', 'ikj'])

              list: [...this.state.list, '123']
            })
          }}>操作数组</button>

          {/* *********************state更新，异步原理： */}
          <div>
            <h1>count: {this.state.count}</h1>
            <button type='button' onClick={() => {
              // this.increment()
              // this.increment()
              // this.increment()
              // this.increment()
              // this.increment()
              // 以上5次调用函数时，获取到的state.count的值，都是0；
              // 所以加1后，为1.
              // 因为在调用函数时，合并了setState, React在setState（）指向时，没有更新count,直到组件被重新渲染。
              this.setState((prestate, props) => {
                console.log(this.state.count) // 0
                return { count: prestate.count + 1 }
              })
              this.setState((prestate, props) => {
                console.log(this.state.count) // 0
                return { count: prestate.count + 1 }
              })
              this.setState((prestate, props) => {
                console.log(this.state.count) // 0
                return { count: prestate.count + 1 }
              })
              this.setState((prestate, props) => {
                console.log(this.state.count) // 0
                return { count: prestate.count + 1 }
              })
              this.setState((prestate, props) => {
                console.log(this.state.count) // 0
                return { count: prestate.count + 1 }
              })
            }}>+++1 ++</button>
          </div>
        </form>

      </div >
    );
  }
}

export default Login;
